Angular 4 NgRx. Реализация Redux для ангуляр 4 2017
Данный курс посвящен библиотеке @ngrx/store - реализация Redux для Angular 4. В процессе данного курса нами в первых уроках будет реализовано приложение, использующее классический подход Angular 4. После мы перепишем его на Redux с использованием ngrx.
Вы узнаете, как правильно оформлять reducers, actions, state используя соответствующие типы и интерфейсы.
После мы подключим сервер с базой данных и добавим асинхронности нашему приложению, которое будет сохранять все состояние на сервере.
Как дополнение, в конце курса мы разберем еще несколько пакетов и решений от команды ngrx. Мы разберем Effects, модуль для синхронизации роутинга со стором и devtools для дебаггинга redux.
Данный курс предназначен уже для тех, кто знаком с технологией Angular 4, и понимает, как с ней работать.


Урок 1. Angular 4 NgRx. Создание макета приложения:
От автора: в данном уроке мы начнем создавать макет приложения на angular 4 и bootstrap 4.
В данном уроке мы начнем курс по изучению NgRx, и в первых двух уроках курса мы с вами создадим приложение, используя классический подход Angular 4 по взаимодействию с элементами. А далее мы перепишем функциональность приложения используя NgRx.
В результате данного урока мы создадим макет для будущего приложения.


Урок 2. Angular 4 NgRx. Добавление функционала в приложении:
От автора: в данном уроке мы добавим функционала приложению, используя классический подход angular 4.
Мы реализуем функционал по динамическому выводу машин в списке, добавлению машин, покупке и удалению машин.


Урок 3. Angular 4 NgRx. Создание редюсера:
От автора: в данном уроке мы начнем разбирать ngrx и в этом уроке создадим и разберем из чего строится редюсер.
В этом уроке вы узнаете с чего стоит начать, если вы используете ngrx. В результате данного урока мы разберем что такое редюсеры, как они строятся, в чем их задача и какие типы данных принимают.


Урок 4. Angular 4 NgRx. Создание экшена:
От автора: в данном уроке мы продолжим разбирать сущности redux и в этом уроке поговорим про то, что такое actions.
В этом уроке вы узнаете, как создаются redux actions в ngrx, какого типа они должны быть, какие обязательные поля имеются у них и в каком формате их правильно оформить.


Урок 5. Angular 4 NgRx. Соединение экшена и редюсера:
От автора: в данном уроке мы разберем на основе уже готовых экшена и редюсера как их нужно правильно объединить.
В этом уроке вы узнаете, как правильно соединить экшен и редюсер. В результате уроке мы напишем функционал в редюсере для нашего первого действия — добавление машины, и вы так же узнаете в чем особенность обработки данных редюсером.


Урок 6. Angular 4 NgRx. Регистрация стора:
От автора: в данном уроке вы узнаете, как добавить в проект третью сущность ngrx – store.
В этом уроке мы зарегистрируем модуль стора в главном модуле приложения. В нем будут храниться все данные, которые отвечают за состояние приложения. И вы узнаете, как зарегистрировать в нем уже существующие редюсеры.


Урок 7. Angular 4 NgRx. Получение данных из стора:
От автора: в этом уроке мы уже с полностью подготовленным приложением и слоем данных научимся получать данные из стора и подписываться на их изменения.
В этом уроке вы узнаете два способа получения данных из стора во view компонентах. Первый способ будет заключаться в подписке на определенное поле стейта и переопределением данных. А второй способ будет заключаться в использовании async пайпа.


Урок 8. Angular 4 NgRx. Добавление машины (dispatch):
От автора: в этом уроке вы научитесь менять стор на примере добавления машин.
В этом уроке вы научитесь менять состояние стора путем добавления машин. Для этого нам потребуется триггерить экшены, которые мы до этого создавали.


Урок 9. Angular 4 NgRx. Удаление машины:
От автора: в этом уроке мы, используя ngrx, сделаем функционал для удаления машины из списка.
В этом уроке вы увидите, как правильно написать редюсер, который позволит реализовать удаление конкретной машины из стора.


Урок 10. Angular 4 NgRx. Покупка машины:
От автора: в этом уроке мы, используя ngrx, реализуем функционал по покупке машины.
В этом уроке вы узнаете, как переписать классический подход angular по покупке машины на изменение стора через экшены и редюсеры.


Урок 11. Angular 4 NgRx. Настройка сервера:
От автора: в этом уроке мы настроим локальный сервер с базой данных.
В этом уроке вы узнаете, как настроить локальный сервер с базой данных используя npm. В результате урока мы подготовим рабочую систему, которая будет запускаться с одного скрипта — сервер с базой данных и сборка всего проекта.


Урок 12. Angular 4 NgRx. Получение списка машин:
От автора: начиная с этого урока мы начнем модифицировать наше приложение для работы с асинхронным кодом — любое взаимодействие будет проходить через ajax запросы к серверу и все будет записываться в базе данных.
В этом уроке мы реализуем возможность загрузки списка машин с сервера используя store и ngrx. Нами также будет написан сервис, который будет делать ajax запросы к серверу и обрабатываться RxJS стримами.


Урок 13. Angular 4 NgRx. Сохранение машин:
От автора: в этом уроке мы перепишем наше приложение так, чтобы при добавлении машин, машина сохранялась на сервере, используя ngrx store.
В этом уроке мы реализуем возможность сохранения только что добавленной машины в базе данных через сервис по общению с сервером.


Урок 14. Angular 4 NgRx. Редактирование и удаление машин:
От автора: в этом уроке мы перепишем наше приложение так, чтобы оставшийся функционал так же взаимодействовал с сервером — удаление и редактирование машин.
В этом уроке мы допишем наше приложение, чтоб остальной функционал — удаление и редактирование машин сохранялись на сервере.


Урок 15. Angular 4 NgRx. Эффекты:
От автора: в данном уроке мы разберем дополнительный инструмент модуля ngrx — effects, предназначенный для работы с серией последовательных и асинхронных actions.
В этом уроке вы узнаете, что такое ngrx effects, зачем они нужны и как ими пользоваться. В результате урока мы установим эффекты, и напишем последовательную серию экшенов для улучшения нашего приложения.


Урок 16. Angular 4 NgRx. Роутинг и девтулз:
От автора: в данном заключительном уроке мы разберем еще несколько полезных инструментов от команды ngrx для работы с routing и devtools.
В этом уроке вы узнаете про дополнительные пакеты от команды ngrx — пакет для синхронизации роутинга и стора, и пакет для разработки, который отслеживает любые изменения стейта.
В результате урока мы установим все пакеты, установим расширение под хром, которое позволяет взаимодействовать с devtools.